<template>
  <div
    class="site-wrapper"
    :class="{ 'site-sidebar--fold': sidebarFold }"
    v-loading.fullscreen.lock="loading"
    element-loading-text="拼命加载中">
    <!-- 如果页面未加载完成，显示加载状态 -->
    <template v-if="!loading">
      <!-- 导航栏组件 -->
      <main-navbar />
      <!-- 侧边栏组件 -->
      <main-sidebar />
      <!-- 主内容区域 -->
      <div class="site-content__wrapper" :style="{ 'min-height': documentClientHeight + 'px' }">
        <div class="el-card is-always-shadow">
          <div class="el-card__body" style="min-height: 247px;">
            <div class="mod-home">
              <!-- 用户信息展示 -->
              <div class="user-info">
                <!-- 用户头像 -->
                <img class="user-avatar" src="@/assets/img/avatar.png" :alt="userName" />
                <!-- 用户ID -->
                <p>用户ID: {{ userId }}</p>
                <!-- 用户名 -->
                <p>用户名: {{ userName }}</p>
              </div>
            </div>
          </div>
        </div>
        <!-- 主内容组件，只有在内容不需要刷新时才显示 -->
        <main-content v-if="!$store.state.common.contentIsNeedRefresh" />
      </div>
    </template>
  </div>
</template>

<script>
import MainNavbar from './main-navbar'; // 导入导航栏组件
import MainSidebar from './main-sidebar'; // 导入侧边栏组件
import MainContent from './main-content'; // 导入主内容组件

export default {
  provide() {
    return {
      refresh: this.refreshContent, // 提供刷新方法给子组件使用
    };
  },
  data() {
    return {
      loading: true, // 页面加载状态
    };
  },
  components: {
    MainNavbar, // 注册导航栏组件
    MainSidebar, // 注册侧边栏组件
    MainContent, // 注册主内容组件
  },
  computed: {
    documentClientHeight: {
      get() {
        return this.$store.state.common.documentClientHeight; // 从 Vuex 获取文档高度
      },
      set(val) {
        this.$store.commit('common/updateDocumentClientHeight', val); // 更新文档高度到 Vuex
      },
    },
    sidebarFold() {
      return this.$store.state.common.sidebarFold; // 从 Vuex 获取侧边栏折叠状态
    },
    userId: {
      get() {
        return this.$store.state.user.id; // 从 Vuex 获取用户ID
      },
      set(val) {
        this.$store.commit('user/updateId', val); // 更新用户ID到 Vuex
      },
    },
    userName: {
      get() {
        return this.$store.state.user.name; // 从 Vuex 获取用户名
      },
      set(val) {
        this.$store.commit('user/updateName', val); // 更新用户名到 Vuex
      },
    },
  },
  created() {
    this.getUserInfo(); // 组件创建时获取用户信息
  },
  mounted() {
    this.resetDocumentClientHeight(); // 组件挂载时设置文档高度
  },
  methods: {
    resetDocumentClientHeight() {
      const updateHeight = () => {
        this.documentClientHeight = document.documentElement.clientHeight; // 获取当前窗口高度并更新到 Vuex
      };
      updateHeight(); // 初始化高度
      window.addEventListener('resize', updateHeight); // 监听窗口大小变化
    },
    async getUserInfo() {
      try {
        const { data } = await this.$http({
          url: this.$http.adornUrl('/sys/user/info'), // 请求用户信息的接口地址
          method: 'get', // GET 请求
          params: this.$http.adornParams(), // 请求参数
        });
        if (data && data.code === 0) { // 如果请求成功
          this.loading = false; // 关闭加载状态
          this.userId = data.user.userId; // 更新用户ID
          this.userName = data.user.username; // 更新用户名
        }
      } catch (error) {
        console.error('Failed to fetch user info:', error); // 请求失败时打印错误信息
      }
    },
    refreshContent() {
      this.$store.commit('common/updateContentIsNeedRefresh', true); // 设置内容需要刷新
      this.$nextTick(() => {
        this.$store.commit('common/updateContentIsNeedRefresh', false); // 重置内容刷新状态
      });
    },
  },
};
</script>

<style scoped>
.user-info {
  display: flex; /* 使用 Flex 布局 */
  flex-direction: column; /* 垂直排列 */
  align-items: center; /* 水平居中 */
  text-align: center; /* 文本居中 */
}
.user-avatar {
  width: 64px; /* 头像宽度 */
  height: 64px; /* 头像高度 */
  border-radius: 50%; /* 圆形头像 */
  margin-bottom: 16px; /* 底部外边距 */
}
</style>
